.top-nav {
  width: 100%;
  background-color: #0086f1;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1001;
  overflow: hidden;

  .log {
    padding: 0 20px;
    line-height: 56px;
    font-size: 24px;
    font-weight: bold;
    color: #fff;
    float: left;
  }

  .el-menu {
    float: left;
    border: none!important;
    background-color: #0086f1;

    .nav-item {
      display: inline-block;
      .el-menu-item {
        color: #fff;
        &:hover {
          background-color: mix(#000, #0086f1, 10%) !important;
        }
        &:focus {
          background-color: mix(#000, #0086f1, 10%) !important;
        }
      }
    }
  }

  .right-menu {
    float: right;
    height: 100%;
    font-size: 10px;

    .right-menu-btn {
      height: 56px;
      display: inline-block;
      text-align: center;
      line-height: 56px;
      cursor: pointer;
      padding: 0 14px;
      color: #fff;
      .badge {
        .el-badge__content {
          margin-top: 10px;
        }
      }
      &:hover {
        background-color: mix(#000, #0086f1, 10%);
      }
    }

    &:focus {
      outline: none;
    }
  }
}
